<template>
    <div class="search_container">
        <el-form ref="searchRef" :model="form">
            <el-row :gutter="24">
                <el-col :span="6" v-for="(item, index) in searchColums" :key="index" class="margin-bottom-md">
                    <el-form-item :label="item.searchLabel || item.title" v-if="!item.searchType || item.searchType  == 'text'">
                        <el-input v-model="form[item.key]" :placeholder="`请输入${item.searchLabel || item.title}`" clearable />
                    </el-form-item>
                    <el-form-item :label="item.searchLabel || item.title" v-if="item.searchType  == 'datetime'">
                        <el-date-picker v-model="form[item.key]" :type="item.dateType || 'date'" 
                            start-placeholder="开始日期" end-placeholder="结束日期"
                            :value-format="item.format || 'YYYY-MM-DD HH:mm:ss'"
                            :placeholder="`请选择${item.searchLabel || item.title}`" clearable style="width: 100%;" />
                    </el-form-item>
                    <el-form-item :label="item.searchLabel || item.title" v-if="item.searchType  == 'select'">
                        <el-select v-model="form[item.key]" :placeholder="`请选择${item.searchLabel || item.title}`" style="width: 100%;"
                            clearable>
                            <el-option v-for="sItem in item.options" :key="sItem[item.valueFilder || 'value']"
                                :label="sItem[item.labelFilder || 'label']" :value="sItem[item.valueFilder || 'value']" />
                        </el-select>
                    </el-form-item>
                    <el-form-item :label="item.searchLabel || item.title" v-if="item.searchType  == 'dic'">
                        <DataDicSelect v-model:value="form[item.key]" 
                            :dicName="item.dicName" :label="item.searchLabel || item.title" 
                            :multiple="item.multiple"></DataDicSelect>
                    </el-form-item>
                </el-col>
                <slot name="search"></slot>
                <!-- tableConfig.searchCustItemCount -->
                <el-col :span="6" :offset=" searchCount < 3 ? 18 - searchCount * 6 : ( searchCount%4 == 0 && foldState) ? 18 : 0" 
                    class="search_btn_group">
                    <el-button :icon="Search" @click="search" type="primary" plain>搜 索</el-button>
                    <el-button :icon="RefreshLeft" @click="reset">重 置</el-button>
                    <el-button :icon=" foldState ? ArrowUp : ArrowDown" v-if="searchCount >= 4 && !tableConfig.searchFoldHide" 
                        @click="changeFoldState">{{ foldState ? '折 叠' : '展 开' }}</el-button>
                </el-col>
            </el-row>
        </el-form>
    </div>
</template>
<script setup>
    import { ref, watch } from "vue"
    import DataDicSelect from "@/components/DataComponents/DataDicSelect.vue"
    import { Search, RefreshLeft, ArrowDown, ArrowUp } from '@element-plus/icons-vue'
    const props = defineProps( [ 'columns', 'config' ] ); // 接收传参
    const searchColums = ref([]);
    const minIndex = ref(3);
    const emit = defineEmits( [ 'search', 'reset' ] ); // 回调注册
    const tableConfig = reactive(props.config || {});
    const foldState = ref(false);
    const form = ref({});
    const searchCount = ref(props.columns.length + (tableConfig.searchCustItemCount || 0) );
    searchColums.value = props.columns.filter((item, index) => { if(index < minIndex.value) return item } );
    const changeFoldState = () => {
        foldState.value = !foldState.value;
        minIndex.value = foldState.value ? searchCount.value : 3
        searchColums.value = props.columns.filter((item, index) => { if(index < minIndex.value) return item } );
    };
    watch(() => props.config, () => { 
        searchCount.value = props.columns.length + (props.config.searchCustItemCount || 0)
    }, { deep: true }); 
    const search = () => {
        emit( 'search', form );
    };
    const reset = () => {
        form.value = {};
        emit( 'reset' );
    };
</script>
<style scoped>
    :deep(.el-button){
        padding: 5px 10px!important;
        height: 30px;
        line-height: 30px;
        margin-top: 2px;
        margin-left: 5px;
    }
    :deep(.el-form-item){
        margin-bottom: 0px;
    }
    .search_container{
        margin-bottom: 3px;
    }
    .search_btn_group{
        margin-bottom: 5px;
        display: flex!important;
        justify-content: flex-end;
    }
</style>